<template>
    <div class="main_box" style="padding-right:10px">
        <div class="add_wrap">
            <div class="tit">
              <h2>{{dataForm.employId?'编辑员工':'新增员工'}}</h2>
              <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
            </div>
            <el-form :model="dataForm" ref="dataForm" label-width="200px" :rules="roleRules">
                <el-row>
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="dataForm.name" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex">
                        <el-radio-group v-model="dataForm.sex">
                            <el-radio :label="1">男</el-radio>
                            <el-radio :label="2">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="出生日期" >
                        <el-date-picker 
                            v-model="dataForm.birthday"
                            placeholder="请选择出生日期"
                            value-format="yyyy-HH-dd">

                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model="dataForm.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="所属公司" prop="company">
                        <el-input v-model="dataForm.company" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="所属部门" prop="depart">
                        <el-select v-model="dataForm.depart" clearable filterable>
                            <el-option v-for="item in departList" :value="item.departName" :label="item.departName" :key="item.departId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="职位" prop="job">
                        <el-input v-model="dataForm.job"></el-input>
                    </el-form-item>
                    <el-form-item label="紧急联系人" prop="linkMan">
                        <el-input v-model="dataForm.linkMan"></el-input>
                    </el-form-item>
                    <el-form-item label="紧急联系电话" prop="linkPhone">
                        <el-input v-model="dataForm.linkPhone"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="荣誉等级">
                        <el-select v-model="dataForm.employLevel" clearable>
                            <el-option :value="1" label="黄金" key="1"></el-option>
                            <el-option :value="2" label="钻石" key="2"></el-option>
                            <el-option :value="3" label="特等" key="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="家庭住址" prop="address">
                        <el-input type="textarea" v-model="dataForm.address"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                      <el-input type="textarea" v-model="dataForm.remark"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                      <el-form-item>
                      <el-button plain type="primary" @click="sureClick">保 存</el-button>
                      <el-button plain @click="returnList">取 消</el-button>
                      </el-form-item>
                </el-row>
            </el-form>
        </div>
    </div>
  </template>
  
  <script>
  import * as message from "@/constants/message";
  import EmployApi from '@/api/system/employ';
  import DepartApi from "@/api/system/depart";
  export default {
      name:"EmployAdd",
      data(){
          return{

              dataForm:{
                employId:"",
                name:"",
                sex:"",
                birthday:"",
                phone:"",
                company:"康来生物科技有限公司",
                depart:"",
                job:"",
                linkMan:"",
                linkPhone:"",
                address:"",
                employLevel:"",
                remark:"",
              },
              departList:[],
              roleRules: {
                name:[
                    { required: true, message: "请输入员工名称", trigger: "blur" },
                ],
                sex: [
                      { required: true, message: "请选择员工性别", trigger: "blur" },
                ],
                phone:[
                    { required: true, message: "请输入手机号", trigger: "blur" },
                    {pattern:/^1(3|4|5|6|7|8|9)\d{9}$/, message: "电话号码格式错误", trigger: "blur" }
                ],
                company:[
                    { required: true, message: "请输入所属公司", trigger: "blur" },
                ],
                depart:[
                    { required: true, message: "请选择所属部门", trigger: "blur" },
                ],
                job:[
                    { required: true, message: "请输入职位", trigger: "blur" },
                ],
                linkPhone:[
                    {pattern:/^1(3|4|5|6|7|8|9)\d{9}$/, message: "电话号码格式错误", trigger: "blur" }
                ],
                depart:[
                    {required:true,message:"请选择部门",trigger:"change"},
                ],
              },
          }
      },
      mounted(){
          this.init();
      },
      methods:{
        init(){
            this.getDeparts()
            if(this.$route.query.id){
                this.dataForm.employId = this.$route.query.id
                this.getData()
            }
        },
        keydown(e) {
            if (e.keyCode == 32) {
                e.returnValue = false;
            }
        },
        getData(){
            var cond ={
                id: this.dataForm.employId
            }
            EmployApi.getEmployInfo(cond)
                .then(res =>{
                    console.log(res.data)
                    this.$Utils.bindingBean(this.dataForm, res.data)
                })
        },
         // 获取所有的部门
        getDeparts(){
            DepartApi.listDepart()
                .then(res => {
                    this.departList = res.data;
                });
        },
        sureClick(){
            // 提交
            this.$refs.dataForm.validate(valid =>{
            if(valid) {
                this.$confirm(message.MSG_CONFIRM_SAVE, message.TITLE_PROMPT, {})
                .then(() => {
                        if(this.dataForm.employId){
                            this.editData();
                        }else{
                            this.addData();
                        }
                    });
            }
            })
        },
        editData(){
            // 编辑
            var cond = {
                employId:this.dataForm.employId,
                name:this.dataForm.name,
                sex:this.dataForm.sex,
                birthday:this.dataForm.birthday,
                phone:this.dataForm.phone,
                company:this.dataForm.company,
                depart:this.dataForm.depart,
                job:this.dataForm.job,
                linkMan:this.dataForm.linkMan,
                linkPhone:this.dataForm.linkPhone,
                address:this.dataForm.address,
                employLevel:this.dataForm.employLevel,
                remark:this.dataForm.remark,
            }
            EmployApi.editEmploy(cond)
                .then(res =>{
                    this.$Utils.notifySuccess();
                    this.returnList();
                })
        },
        addData(){
            // 新增
            var cond = {
                name:this.dataForm.name,
                sex:this.dataForm.sex,
                birthday:this.dataForm.birthday,
                phone:this.dataForm.phone,
                company:this.dataForm.company,
                depart:this.dataForm.depart,
                job:this.dataForm.job,
                linkMan:this.dataForm.linkMan,
                linkPhone:this.dataForm.linkPhone,
                address:this.dataForm.address,
                employLevel:this.dataForm.employLevel,
                remark:this.dataForm.remark,
            }
            EmployApi.addEmploy(cond)
                .then(data =>{
                    this.$Utils.notifySuccess();
                    this.returnList();
                })
        },
        returnList(){
            // 返回上一界面
            this.$store.dispatch('delView', this.$route);
            this.$router.push({ path:'/sys/employManagement'})
        }
      }
  }
  </script>
  
  <style lang="scss" src="@/assets/css/views/add.scss" scope>
  </style>
  <style  lang="scss">
  
      
  </style>
  